<template>
    <div class="home">
        <transition-group name="before-list">
            <div key="1" v-show="transition" class="home-1 home-item">
                <div class="xl-card">
                    <div class="xl-card-title">
                        企业标签
                    </div>
                    <div class="xl-card-view">
                        <div class="home-tag">
                            <div class="home-tag-item">
                                <a-icon type="file-search"/>
                                <div class="home-tag-view">
                                    <span>科技型企业</span>
                                    <span>12</span>
                                </div>
                            </div>
                            <div class="home-tag-item">
                                <a-icon type="home"/>
                                <div class="home-tag-view">
                                    <span class="xl-text">高新技术企业</span>
                                    <span>25</span>
                                </div>
                            </div>
                            <div class="home-tag-item">
                                <a-icon type="team"/>
                                <div class="home-tag-view">
                                    <span>科技型中小企业</span>
                                    <span>120</span>
                                </div>
                            </div>
                            <div class="home-tag-item">
                                <a-icon type="flag"/>
                                <div class="home-tag-view">
                                    <span>双创载体</span>
                                    <span>210</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div key="2" v-show="transition" class="home-4 home-item">
                <div class="xl-card">
                    <div class="xl-card-title">
                        常用功能
                    </div>
                    <div class="xl-card-view">
                        <div class="home-menu">
                            <div class="home-menu-item">
                                <a-icon type="file-word"/>
                                <div class="home-menu-view">
                                    <span>智能填写</span>
                                    <span>点击进入</span>
                                </div>
                            </div>
                            <div class="home-menu-item">
                                <a-icon type="file-word"/>
                                <div class="home-menu-view">
                                    <span>新建业务</span>
                                    <span>点击进入</span>
                                </div>
                            </div>
                            <div class="home-menu-item">
                                <a-icon type="file-word"/>
                                <div class="home-menu-view">
                                    <span>智能填写</span>
                                    <span>点击进入</span>
                                </div>
                            </div>
                            <div class="home-menu-item">
                                <a-icon type="file-word"/>
                                <div class="home-menu-view">
                                    <span>新建业务</span>
                                    <span>点击进入</span>
                                </div>
                            </div>
                            <div class="home-menu-item">
                                <a-icon type="file-word"/>
                                <div class="home-menu-view">
                                    <span>智能填写</span>
                                    <span>点击进入</span>
                                </div>
                            </div>
                            <div class="home-menu-item">
                                <a-icon type="file-word"/>
                                <div class="home-menu-view">
                                    <span>新建业务</span>
                                    <span>点击进入</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div key="3" v-show="transition" class="home-3  home-item">
                <a-row :gutter="16">
                    <a-col :xl="12">
                        <div class="xl-card">
                            <div class="xl-card-title">
                                金融需求
                            </div>
                            <div class="xl-card-view">
                                <div class="after-table">
                                    <div class="after-table-head">
                                        <div class="after-table-item">
                                            标题
                                        </div>
                                        <div class="after-table-item">
                                            受理时间
                                        </div>
                                    </div>
                                    <div class="after-table-body">
                                        <div class="after-table-body-item" v-for="(item,index) in 8" :key="index">
                                            <div class="after-table-item xl-text">
                                                鼓楼区加快推进技术转移体系建设的...
                                            </div>
                                            <div class="after-table-item xl-text">
                                                2020-7-10
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="after-table-page">
                                    <a-pagination size="small" :total="50"/>
                                </div>
                            </div>
                        </div>
                    </a-col>
                    <a-col :xl="12">
                        <div class="xl-card">
                            <div class="xl-card-title">
                                金融需求
                            </div>
                            <div class="xl-card-view">
                                <div class="after-table">
                                    <div class="after-table-head">
                                        <div class="after-table-item">
                                            标题
                                        </div>
                                        <div class="after-table-item">
                                            受理时间
                                        </div>
                                    </div>
                                    <div class="after-table-body">
                                        <div class="after-table-body-item" v-for="(item,index) in 8" :key="index">
                                            <div class="after-table-item xl-text">
                                                鼓楼区加快推进技术转移体系建设的...
                                            </div>
                                            <div class="after-table-item xl-text">
                                                2020-7-10
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="after-table-page">
                                    <a-pagination size="small" :total="50"/>
                                </div>
                            </div>
                        </div>
                    </a-col>
                </a-row>
            </div>
        </transition-group>
    </div>
</template>

<script>
    import {demandBasePageList,appealPageList,companyBaseStatistic} from '@/assets/api'
    import {companyResultStatistic} from '@/assets/api/policy'
    export default {
        name: "index",
        data(){
            return{
                transition:true,
                companyNum:[],
                companyResultList:[],
                appeallist:[],
                demandList:[],
                companyTotal:1
            }
        },
        created() {
            // setTimeout(_ => {
            //     this.transition = true
            //     this.companyResult()
            //     // this.companyBase()
            //     this.demandBasePage()
            //     this.appealPage()
            // }, 1000)
            // this.companyResult()
            // this.companyBase()
            // this.demandBasePage()
            // this.appealPage()
        },
        methods: {
            // 企业数据
            companyBase(){
                companyBaseStatistic().then(result => {
                    this.companyNum = result.result
                    // console.log(result,12121212121)
                })
            },
            //诉求列表
            appealPage(){
                appealPageList({
                    pagingParam: {
                        pageSize: 8,
                        pageNumber: 1
                    },
                    param:{}
                }).then(result => {
                    this.appeallist = result.result
                    console.log(result,343434343434343)
                })
            },
            //需求列表
            demandBasePage(){
                demandBasePageList({
                    pagingParam: {
                        pageSize: 8,
                        pageNumber: 1
                    },
                    param:{}
                }).then(result => {
                    this.demandList = result.result
                    console.log(result,12121212121212)
                })
            },
            //金融需求
            //政策匹配
            companyResult(){
                companyResultStatistic({
                    pagingParam: {
                        pageSize: 8,
                        pageNumber: 1
                    },
                    param:{}
                }).then(res => {
                    this.companyResultList = res.result.itemList
                    this.companyTotal = res.result.total
                    // console.log(res,11111111111)
                })
            },
            getStatus(data){
                if(data == 1){
                    return '待审核'
                }
                if(data == 1){
                    return '审核通过'
                }
                if(data == 1){
                    return '需求已通知'
                }
                if(data == 1){
                    return '需求已对接'
                }
                if(data == 1){
                    return '对接完成'
                }
                if(data == 1){
                    return '审核拒绝'
                }
            },
        }
    }
</script>

<style scoped lang="less">
    .home {
        background-color: #f8f8f8;
        position: relative;
        overflow-x: hidden;
        overflow-y: scroll;
        padding: 16px;

        .home-item {
            margin-bottom: 16px;
        }

        .home-menu {
            display: flex;
            align-items: center;
            justify-content: space-between;

            .home-menu-item {
                width: 239px;
                height: 161px;
                background-color: #ffffff;
                box-shadow: 0px 8px 31px 0px rgba(20, 49, 127, 0.08);
                display: flex;
                align-items: center;
                justify-content: space-around;
                border-radius: 10px;
                margin-right: 26px;

                i {
                    font-size: 38px;
                }

                .home-menu-view {
                    display: flex;
                    align-items: center;
                    flex-direction: column;
                    justify-content: space-around;

                    span {
                        font-size: 28px;
                        -webkit-line-clamp: 1;
                        display: -webkit-box;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        -webkit-box-orient: vertical;
                    }

                    span:nth-child(2) {
                        font-size: 14px;
                        color: #b5b5b5;
                    }
                }
            }

            .home-menu-item:last-child {
                margin: 0;
            }
        }

        .home-tag {
            display: flex;
            align-items: center;
            justify-content: space-between;

            .home-tag-item {
                width: 307px;
                height: 139px;
                box-shadow: 0px 8px 31px 0px rgba(20, 49, 127, 0.08);
                display: flex;
                align-items: center;
                justify-content: space-around;
                background-image: linear-gradient(-90deg, #29bdd9 0%, #276ace 100%);
                border-radius: 10px;
                margin-right: 26px;

                i {
                    font-size: 43px;
                    color: #fff;
                }

                .home-tag-view {
                    display: flex;
                    align-items: center;
                    flex-direction: column;
                    justify-content: space-around;

                    span {
                        font-size: 16px;
                        color: #ffffff;
                        -webkit-line-clamp: 1;
                        display: -webkit-box;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        -webkit-box-orient: vertical;
                    }

                    span:nth-child(2) {
                        font-size: 28px;
                        color: #ffffff;  
                    }
                }
            }

            .home-tag-item:last-child {
                margin: 0;
            }
        }

        .home-2 ,.home-3 {
            min-height: 483px;
            .after-table .after-table-head {
                width: 100%;
                display: flex;
                align-items: center;
                justify-content: space-between;
                // background-image: linear-gradient(-90deg, #29bdd9 0%, #276ace 100%);
                background-color: #ececec;
                border-radius: 10px;
                font-size: 16px;
                color:#000000;
                padding: 8px 16px;
            }
            .after-table .after-table-item:nth-child(1) {
                flex: 3;
            }
            .after-table-item:last-child {
                text-align: center;
            }

            .home-after-view-item-item:last-child {
                text-align: center;
            }
        }

        .before-list-enter-active {
            transition: all .9s ease;
        }

        .before-list-leave-active {
            transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
        }

        .before-list-enter, .before-list-leave-to
            /* .slide-fade-leave-active for below version 2.1.8 */ {
            transform: translateY(1080px);
            opacity: 0;
        }
    }
</style>
